﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <#include "../comm/header.ftl"/>
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.css" type="text/css" />
    <link href="${req.contextPath}/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/css/core.css" type="text/css" />
    <script type="text/javascript" src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/plugins/page/jquery.twbsPagination.min.js"></script>
    <script src="/js/plugins/jquery-validata/jquery.validate.js"></script>
    <script src="/js/plugins/jquery-form/jquery.form.js"></script>
    <script src="/js/plugins/jquery-bootstrap/jquery.bootstrap.min.js"></script>
    <script src="/js/plugins/My97DatePicker/WdatePicker.js"></script>

    <script>
        $(function () {
            //自定义手机号验证
            jQuery.validator.addMethod("isPhone", function(value, element) {
                var length = value.length;
                var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
                return this.optional(element) || (length == 11 && mobile.test(value));
            }, "请正确填写您的手机号码");

            $("#editForm").validate({
                rules: {
                    name: {
                        required: true,
                        minlength:2
                    },
                    sid:{
                        required: true,
                    },
                    password:{
                        required:true
                    },
                    repwd:{
                        required:true,
                        equalTo:"#pwd"
                    },
                    phone:{
                        required:true,
                        isPhone:true
                    },
                    age:{
                        required:true,
                        digits: true
                    },
                    idno:{
                        required:true,
                    }

                },
                messages: {
                    name: {
                        required: "用户名不能为空",
                        minlength:"至少输入两个字符",
                    },
                    sid:{
                        required:"sid不能为空"
                    },
                    password:{
                        required:"密码不能为空"
                    },
                    repwd:{
                        required:"再次输入的密码也不能为空",
                        equalTo:"密码不一致"
                    },
                    phone:{
                        required:"不能为空",
                        isPhone:"请输入正确的手机号码"
                    },
                    age:{
                        required:"年龄不能为空",
                        digits:"必须为正整数"
                    },
                    idno:{
                        required:"证件号不能为空",
                    }

                }


            });
        });
    </script>
</head>
<body>

<div class="container-fluid" style="margin-top: 20px">
    <div class="row">
        <div class="col-xs-12">
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="page-head-line">员工编辑</h1>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <form class="form-horizontal" action="/employee/saveOrUpdate.do" method="post" id="editForm">
                        <input type="hidden" value="${(emp.id)!}" name="id">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-xs-3 control-label">用户名：</label>
                                    <div class="col-xs-9">
                                        <input type="text" class="form-control input-sm" name="name" value="${(emp.name)!}"
                                               placeholder="请输入用户名">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-xs-3 control-label">sid：</label>
                                    <div class="col-xs-9">
                                        <input type="text" class="form-control input-sm" id="sid" name="sid" value="${(emp.sid)!}"
                                               placeholder="请输入用户sid(登录账号)">
                                    </div>
                                    <#if emp??>
                                        <script>
                                            $("#sid").attr("readonly","readonly");
                                        </script>
                                    </#if>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-xs-3 control-label">性别：</label>
                                    <div class="col-xs-9">
                                        <select class="form-control input-sm" name="gender">
                                            <option value="1">男</option>
                                            <option value="0">女</option>
                                        </select>
                                    </div>
                                    <script>
                                        $("#editForm select[name='gender']").val(${(emp.gender)!});
                                    </script>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-xs-3 control-label">年龄：</label>
                                    <div class="col-xs-9">
                                        <input type="text" class="form-control input-sm" name="age" value="${(emp.age)!}"
                                               placeholder="请输入年龄">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-xs-3 control-label">电话：</label>
                                    <div class="col-xs-9">
                                        <input type="text" class="form-control input-sm" name="phone" value="${(emp.phone)!}"
                                               placeholder="请输入手机号">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-xs-3 control-label">入职日期：</label>
                                    <div class="col-xs-9">
                                        <input type="text" class="form-control input-sm" id="hire_date" name="hireDate"
                                               placeholder="请选择入职日期" value="${(emp.hireDate?string("yyyy-MM-dd"))!}">
                                    </div>
                                    <script>
                                        $("#hire_date").click(function () {
                                            WdatePicker({
                                                readOnly: true, //只读
                                            });
                                        });
                                    </script>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-xs-3 control-label">校区：</label>
                                    <div class="col-xs-9">
                                        <select class="form-control input-sm" id="school_list" name="school.id" onchange="changeDeptSelect();">
                                        <#--<#list schools as sch>
                                            <option value="${(sch.id)!}">${(sch.name)!}</option>
                                        </#list>-->
                                        </select>
                                    </div>
                                    <#--<script>
                                        //校区回显
                                        $(function () {
                                            changeDeptSelect();
                                            $("#school_list").val(${(emp.school.id)!});
                                        });
                                    </script>-->
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-xs-3 control-label">部门：</label>
                                    <div class="col-xs-9">
                                        <select class="form-control input-sm" id="dept_list" name="dept.id">
                                        <#--<#list depts as d>
                                            <option value="${(d.id)!}">${(d.name)!}</option>
                                        </#list>-->
                                        </select>
                                    </div>
                                    <#--<script>
                                        //部门回显
                                        $(function () {
                                            $("#dept_list").val(${(emp.dept.id)!});
                                        });
                                    </script>-->
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-xs-3 control-label">证件号：</label>
                                    <div class="col-xs-9">
                                        <input type="text" class="form-control input-sm" name="idno" value="${(emp.idno)!}"
                                               placeholder="请输入证件号码">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-xs-3 control-label">状态：</label>
                                    <div class="col-xs-9">
                                        <select class="form-control input-sm" name="status">
                                            <option value="1">在职</option>
                                            <option value="0">离职</option>
                                            <option value="2">锁定</option>
                                            <option value="3">禁用</option>
                                        </select>
                                    </div>
                                    <script>
                                        $("#editForm select[name='status']").val(${(emp.status)!});
                                    </script>
                                </div>
                            </div>
                        </div>
                        <#if !emp??>
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label class="col-xs-3 control-label">密码：</label>
                                        <div class="col-xs-9">
                                            <input type="password" class="form-control input-sm" id="pwd" name="password"
                                                   placeholder="请输入密码">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label class="col-xs-3 control-label">验证密码：</label>
                                        <div class="col-xs-9">
                                            <input type="password" class="form-control input-sm" name="repwd" placeholder="再输入一遍密码">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </#if>
                        <div class="row">
                            <div class="form-group col-xs-8">
                                <label class="col-xs-2 control-label">授予管理员：</label>
                                <label class="checkbox-inline" style="margin-left: 15px;">
                                    <input type="checkbox" id="admin" name="admin">
                                </label>
                            </div>
                        </div>
                        <#--角色分配列表-->
                        <div class="form-group col-xs-12" id="role">
                            <div class="row" style="margin-top: 10px">
                                <div class="col-xs-3 col-xs-offset-1">
                                    <div>
                                        <label class="control-label">系统角色：</label>
                                    </div>
                                <#--显示系统中所有的角色-->
                                    <select multiple class="form-control allRoles" size="20">
                                        <#list roles as role>
                                            <option value="${(role.id)!}">${(role.name)!}</option>
                                        </#list>
                                    </select>
                                </div>
                                <div class="col-xs-1" style="margin-top: 60px;" align="center">
                                    <div>
                                        <a type="button" class="btn btn-info  " style="margin-top: 10px"
                                           onclick="moveSelected('allRoles', 'selfRoles')">&nbsp;&gt;&nbsp;</a>
                                        <br>
                                        <a type="button" class="btn btn-info " style="margin-top: 10px"
                                           onclick="moveSelected('selfRoles', 'allRoles')">&nbsp;&lt;&nbsp;</a>
                                        <br>
                                        <a type="button" class="btn btn-info " style="margin-top: 10px"
                                           onclick="moveAll('allRoles', 'selfRoles')">&gt;&gt;</a>
                                        <br>
                                        <a type="button" class="btn btn-info " style="margin-top: 10px"
                                           onclick="moveAll('selfRoles', 'allRoles')">&lt;&lt;</a>
                                    </div>
                                </div>

                                <div class="col-xs-3">
                                    <div>
                                        <label class="control-label">授予角色：</label>
                                    </div>
                                    <select multiple class="form-control selfRoles" size="20" name="ids">
                                    <#--显示当前用户拥有的角色-->
                                         <#list (emp.roles)! as role>
                                            <option value="${(role.id)!}">${(role.name)!}</option>
                                         </#list>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-xs-offset-1 col-xs-6">
                                <button id="btn_submit" type="button" class="btn btn-success">
                                    <span class="glyphicon glyphicon-saved"></span> 保存
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    // 表单提交
    $(function () {
        $("#btn_submit").click(function () {
            if(!$("#editForm").valid()){
                return;
            }
            $("[name='ids'] option").prop("selected", true);
            $("#editForm").ajaxSubmit(function (result) {
                if(result.success){
                    $.ligerDialog.success("保存成功","提示",function () {
                        window.parent.tab.moveToTabItem("员工管理");
                        window.parent.tab.reload("员工管理");
                        window.parent.tab.removeSelectedTabItem();//删除选中（当前）tab
                    });
                }else{
                    $.ligerDialog.error("保存失败","错误");
                }
            });
        });

        var role;
        //    回显超管
        //     emp.admin?string("true","false")
        if (${(emp.admin?string('1','0'))!0}) {
            $("#admin").prop("checked", true);
            role = $("#role").remove();
        }


        //    超管处理
        $("#admin").click(function () {
            if (this.checked) {
                role = $("#role").remove();
            } else {
                $("#admin").closest("div").after(role)
            }
        });

        //    选项去重
        $.each($(".selfRoles option"), function (index, ele) {
            $(".allRoles option[value='" + ele.value + "']").remove();
        });


    });

    //移动所有角色
    function moveAll(srcId, targId) {
        $("." + srcId + " option").appendTo("." + targId);
    }

    //    移动选中的角色
    function moveSelected(srcId, targId) {
        $("." + srcId + " option:selected").appendTo("." + targId);
    }

    var schoolsJson = ${(schoolsJson)!};
    //二级联动，校区改变，修改部门选项列表
    function changeDeptSelect() {
        var schoolId = $("#school_list").val();
        var school_dept;
        for(i =0; i < schoolsJson.length; i++){
            if(schoolId == schoolsJson[i].id){
                school_dept = schoolsJson[i].depts;
                break;
            }
        }
        renderOptions("dept_list",school_dept);
    }
    //渲染下拉列表选项
    function renderOptions(target, value) {
        var options = "";
        for(i = 0; i < value.length; i++){
            options = options + "<option value='" + value[i].id + "'>" + value[i].name + "</option>";
        }
        $("#" + target + " option").remove();
        $("#" + target).append(options);
    }

    $(function () {
        renderOptions("school_list",schoolsJson);
        //回显校区
        $("#school_list").val(${(emp.school.id)!});
        changeDeptSelect();//触发一次部门渲染
        //回显部门
        $("#dept_list").val(${(emp.dept.id)!});
    })

</script>
</body>
</html>